<template>
	<view style="margin: 0 4vw;">
		<u--image :showLoading="true" :src="huodong.images.split(',')[0]" width="100%" mode="widthFix"></u--image>

		<view class="huodong">
			<view class="u-flex u-flex-items-center">
				<text class="m-flex-no guize">活动主题：</text>
				<text class="m-font-b">{{ huodong.name }}</text>
			</view>
			<view class="u-m-t-20 u-flex">
				<text class="m-flex-no guize">活动规则：</text>
				<u-read-more color="#0e5642" textIndent="0" ref="guize" :toggle="true" showHeight="60" :shadowStyle="shadowStyle">
					<rich-text style="width: 68vw" :nodes="huodong.content"></rich-text>
				</u-read-more>
			</view>
			<view class="u-flex u-flex-items-center u-m-t-10">
				<text class="m-flex-no guize">活动时间：</text>
				<text>{{ $u.timeFormat(huodong.startdatetime, 'yyyy年mm月dd日') }}-{{ $u.timeFormat(huodong.enddatetime, 'yyyy年mm月dd日') }}</text>
			</view>
			<view class="u-m-t-20 u-flex">
				<text class="m-flex-no guize">活动奖品：</text>
				<u-read-more color="#0e5642" textIndent="0" ref="huodong" :toggle="true" showHeight="60" :shadowStyle="shadowStyle">
					<rich-text style="width: 68vw" :nodes="huodong.jiangpin"></rich-text>
				</u-read-more>
			</view>
			<view class="canjia" @click="nextNav('/pages/christmasr/baoming', 1)">立即报名</view>
		</view>

		<view class="daojishi u-flex u-flex-center u-flex-items-center u-m-t-30">
			<view>距离结束时间：</view>
			<u-count-down :time="huodong.enddatetime * 1000 - Date.parse(new Date())" format="HH:mm:ss" autoStart millisecond @change="onChange">
				<view class="time">
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.days > 10 ? timeData.days : '0' + timeData.days }}</text>
					</view>
					<text class="time__doc">天</text>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}</text>
					</view>
					<text class="time__doc">时</text>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.minutes }}</text>
					</view>
					<text class="time__doc">分</text>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.seconds }}</text>
					</view>
					<text class="time__doc">秒</text>
				</view>
			</u-count-down>
		</view>

		<view class="m-bg-w u-p-t-15 u-p-b-15 u-m-t-20">
			<u-search placeholder="请输入号码" height="40" bg-color="transparent" v-model="keyword" :show-action="false" @change="$u.debounce(input_blur, 500)"></u-search>
		</view>
		<view v-if="dataList.length">
			<view class="u-flex u-flex-wrap u-flex-between u-m-b-30">
				<view class="piao-box" v-for="(item, index) in dataList" :key="index">
					<u--image :showLoading="true" :src="item.images.split(',')[0]" width="44vw" height="44vw"></u--image>
					<view class="piaohao">
						{{ item.number }}
						<text class="u-font-8">号</text>
					</view>
					<view class="u-font-30 u-m-t-15 m-t-c">{{ item.name }}</view>
					<view class="m-c-9e u-m-t-15 m-t-c">
						<text class="u-font-30">{{ item.num }}</text>
						票
					</view>
					<view class="m-btn-g2 tou1 u-m-t-15" @click="toupiao(1, item)">投票</view>
				</view>
			</view>
		</view>
		<list-empty v-else text="暂时没有数据哟!" list="data" :listHighly="300"></list-empty>
		<u-popup :show="show" @close="close" round="8rpx" :safeAreaInsetBottom="false" mode="center" :closeable="true">
			<view class="boxding" v-if="tou">
				<view class="m-t-c u-font-40">{{ huodong.name }}</view>
				<view class="u-p-t-60 u-p-b-60 u-m-b-60 u-border-bottom"><u--image :showLoading="true" :src="item.images.split(',')[0]" width="300" height="300"></u--image></view>
				<view class="u-flex u-flex-between u-flex-items-end">
					<view class="">
						<view class="u-flex u-flex-items-center">
							<u--image :showLoading="true" :src="item.avatar" width="50" height="50" shape="circle"></u--image>
							<view class="u-m-l-28">
								<view class="haoma">{{ item.id }}号</view>
								<view class="m-c-94 u-m-t-15">{{ item.name }}</view>
							</view>
						</view>
						<view class="u-m-t-70 m-c-g">请帮我投出您宝贵的一票吧！</view>
						<view class="tou3 u-flex u-flex-center">
							<text class="u-m-r-15">长按识别二维码</text>
							<u-icon name="jiantou3" customPrefix="master" color="#fff" size="14"></u-icon>
						</view>
					</view>
					<u--image :showLoading="true" :src="item.qr" width="100" height="100"></u--image>
				</view>
			</view>
			<view class="boxding" v-else>
				<view class="u-border-bottom u-p-b-25 u-font-30">{{ item.name }}</view>
				<view class="u-flex u-p-t-20 u-p-b-40">
					<view class="u-flex-1 m-t-c">
						<view class="m-big-f">{{ item.pm }}</view>
						<view>排名</view>
					</view>
					<view class="u-flex-1 m-t-c">
						<view class="m-big-f">{{ item.disparity }}</view>
						<view>距离前一名</view>
					</view>
					<view class="u-flex-1 m-t-c">
						<view class="m-big-f">{{ item.num }}</view>
						<view>票数</view>
					</view>
				</view>
				<view class="u-flex u-flex-between u-flex-wrap">
					<view class="m-mg-t-3vw" v-if="ix < 4" v-for="(it, ix) in item.images.split(',')" :key="ix">
						<u--image :showLoading="true" :src="it" :width="ix > 0 ? '26vw' : '84vw'" :height="ix > 0 ? '26vw' : '84vw'"></u--image>
					</view>
				</view>
				<view class="m-btn-g2 tou2" @click="toupiao(2, item.id)">投他一票</view>
				<!-- <view class="kong" @click="tou = true">帮TA拉票</view> -->
				<button class="m-btn-g3" type="default" open-type="share">帮TA拉票</button>
			</view>
		</u-popup>
		<obtain :show="obtain" @showchange="obtain = false"></obtain>
		<view class="fukuang" @click="nextNav('/pages/christmasr/leaderboard?id=' + id)">排行榜</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			shadowStyle: {
				backgroundImage: 'none',
				paddingTop: '0',
				marginTop: '0'
			},
			huodong: {
				images: '',
				content: '',
				jiangpin: ''
			},
			timeData: {},
			dataList: [],
			item: {
				images: ''
			},
			show: false,
			tou: false,
			keyword: '',
			id: null
		};
	},
	async onShareAppMessage(res) {
		let path = uni.$u.mpShare.path;
		let imageUrl = this.huodong.images.split(',')[0];
		if (this.item.images) {
			imageUrl = this.item.images.split(',')[0];
			path += '&item=' + JSON.stringify(this.item);
		}
		console.log({
			title: this.huodong.name,
			path,
			imageUrl
		});
		return {
			title: this.huodong.name,
			path,
			imageUrl
		};
	},
	async onLoad(e) {
		if (e.id || e.scene) {
			let scene = e.scene ? e.scene.split('_') : [1];
			this.id = e.id || scene[0];
			let huodong = await this.require('toupiao', {
				id: this.id
			});
			if (huodong) {
				this.huodong = huodong;
				this.load();
			}
			this.path = 'toupiaolist';
			this.params = {
				...this.params,
				pnum: this.pnum,
				id: this.id,
				number: this.keyword
			};
			await this.getList();
			if (scene[1]) {
				uni.setStorageSync('agentid', scene[1]);
			}
			if (scene[2]) {
				// let item = await this.require('toupiao', {
				// 	id: this.id,
				// 	pid: scene[2]
				// });
				// if (item) {
				// 	this.item = item;
				// }
				this.show = true;
			}
		}
		if (e.item) {
			this.item = JSON.parse(e.item);
			this.show = true;
		}
	},
	async onShow() {
		this.show = false;
		this.tou = false;
		let huodong = await this.require('toupiao', {
			id: this.id
		});
		if (huodong) {
			this.huodong = huodong;
		}
		this.path = 'toupiaolist';
		this.params = {
			p: 1,
			pnum: this.pnum,
			id: this.id,
			number: this.keyword
		};
		await this.getList();
	},

	methods: {
		load() {
			this.$nextTick(() => {
				this.$refs.guize.init();
				this.$refs.huodong.init();
			});
		},
		onChange(e) {
			this.timeData = e;
		},
		close() {
			this.show = false;
			setTimeout(() => {
				this.tou = false;
			}, 100);
		},
		async toupiao(type, item) {
			if (type == 1) {
				this.item = item;
				this.show = true;
			} else {
				if (!(await this.getMobile())) {
					return;
				}
				// 向后台投票
				let toupiaouser = await this.require('toupiaouser', {
					id: item
				});
				if (toupiaouser) {
					this.nextNav('/pages/christmasr/touok?id=' + this.id);
				} else {
					this.$u.toast('每天只能投3次票！');
				}
			}
		},
		async input_blur() {
			if (this.keyword % 1 != 0) {
				return uni.$u.toast('请输入数字');
			}
			this.params.p = 1;
			this.params.number = this.keyword;
			await this.getList();
		}
	}
};
</script>

<style lang="scss" scoped>
.huodong {
	background-color: #fff;
	padding: 4vw;
	position: relative;
}
.guize {
	width: 16vw;
}
.fukuang {
	position: fixed;
	right: 0;
	top: 770rpx;
	width: 190rpx;
	height: 85rpx;
	line-height: 85rpx;
	padding-right: 20rpx;
	text-align: right;
	background-image: url('https://neidangjia.oss-accelerate.aliyuncs.com/christmasr/fukuang.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	color: #fff;
}

.daojishi {
	width: 100%;
	height: 102rpx;
	background-image: url('https://neidangjia.oss-accelerate.aliyuncs.com/christmasr/bg1.png');
	background-repeat: no-repeat;
	background-size: 100% 102rpx;
}

.time {
	@include flex;
	align-items: center;

	&__custom {
		width: 30px;
		height: 30px;
		background-image: url('https://neidangjia.oss-accelerate.aliyuncs.com/christmasr/bg2.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;

		&__item {
			color: #fff;
			font-size: 12px;
			text-align: center;
		}
	}

	&__doc {
		padding: 0px 4px;
	}

	&__item {
		color: #606266;
		font-size: 15px;
		margin-right: 4px;
	}
}

.piao-box {
	position: relative;
	background-color: #fff;
	border-radius: 15rpx;
	overflow: hidden;
	padding-bottom: 20rpx;
	width: 44vw;
	margin-top: 4vw;

	&:nth-child(2n-1) {
		margin-right: 2vw;
	}

	&:nth-child(2n) {
		margin-left: 2vw;
	}
}
.m-mg-t-3vw {
	margin-top: 3vw;
}
.m-c1 {
	color: #229e7c;
}

.piaohao {
	position: absolute;
	top: 0;
	background-color: #0e5642;
	color: #fff;
	padding: 5rpx;
	border-bottom-right-radius: 15rpx 15rpx;
}

.tou1 {
	width: 300rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 30rpx;
	font-weight: bold;
}

.boxding {
	overflow-y: auto;
	height: 100vh;
	background-color: #fff;
	padding: 8vw;
	width: 100xw;
}

.m-big-f {
	font-size: 48rpx;
}

.tou2 {
	height: 72rpx;
	font-size: 30rpx;
	line-height: 72rpx;
	margin-top: 40rpx;
}

.kong {
	text-align: center;
	border-radius: 70rpx;
	border: 2px solid #0e5642;
	color: #0e5642;
	line-height: 68rpx;
	margin-top: 20rpx;
	font-size: 30rpx;
}

.haoma {
	font-size: 48rpx;
	color: #0e5642;
}

.m-c-94 {
	color: #949494;
}

.tou3 {
	width: 240rpx;
	height: 46rpx;
	line-height: 46rpx;
	margin-top: 30rpx;
	background-color: #0e5642;
	border-radius: 100rpx;
	color: #fff;
}

.canjia {
	position: absolute;
	right: 20rpx;
	top: 18rpx;
	width: 150rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background-image: url('https://neidangjia.oss-accelerate.aliyuncs.com/christmasr/canjia.png');
	background-repeat: no-repeat;
	background-size: 150rpx 60rpx;
	color: #fff;
}
.m-btn-g3 {
	font-size: 30rpx;
	color: #0e5642;
	border: 2rpx solid #0e5642;
	margin-top: 20rpx;
	border-radius: 80rpx;
	height: 72rpx;
	line-height: 68rpx;
}
</style>
